<template>
  <div>
    <Card>
      <p slot="title" @click.stop="queryFlag=!queryFlag">
        <Icon type="ios-search" size="24"></Icon>
        课程章节列表
      </p>
      <div  slot="extra">
        <AddChapter @on-refresh="refresh"></AddChapter>
      </div>

        <Form inline :label-width="80" v-show="queryFlag">
            <Form-item label="课程名称:">
                <Select v-model="queryParams['course.id']" filterable>
                    <Option value="">【课程不限】</Option>
                <Option v-for="item in courseList" :value="item.id" :key="item.id">{{ item.courseName }}</Option>
                  </Select>
            </Form-item>
            <Form-item label="章节名称:">
            <Input type="text" v-model="queryParams.chapterName"/>
            </Form-item>
            <Form-item :label-width="0">
                <Button type="primary" @click="query">搜索</Button>
            </Form-item>
        </Form>

        <Table border stripe :columns="columns" :data="rows">
        <template slot-scope="{ row, index }" slot="actions">
            <Row>
                <Col span="10">
                  <EditChapter :row="row" @on-refresh="refresh"></EditChapter>
                </Col>
                <Col span="10">
                 <Button type="error" size="small"  @click="remove(row.id)">删除</Button>
                </Col>
            </Row> 
        </template>
        </Table>
        <div style="text-align: center;margin: 16px 0">
            <Page
                :total="total"
                :current.sync="queryParams.page"
                show-sizer
                @on-change="query"
                @on-page-size-change="changePageSize"></Page>
        </div>
    </Card>
    
  </div>
</template>
<script>
import {queryList,remove} from '@/api/chapter'
import {getAllCourse} from '@/api/course'
import AddChapter from './components/AddChapter'
import EditChapter from './components/EditChapter'
export default {
    components:{
      AddChapter,EditChapter
    },
    data(){
        return {
            queryFlag:true,
            columns:[
               {title:"章节编号",key:"id"},
               {title:"章节名称",key:"chapterName"},
               {title:"章节序号",render(h,{row}){
                   return (<Badge count={row.disOrder} type="normal"></Badge>)
               }},
               {title:"所属课程",render(h,{row}){
                   return (<span>{row.course.courseName}</span>);
               }},
               {title:"操作",slot:"actions"}
            ],
            rows:[],
            total:0,
            queryParams:{
                limit:10,
                page:1,
                "course.id":null,
                chapterName:null
            }
        }
    },
    computed:{
        courseList(){return this.$store.state.course.courseList}
    },
    methods:{
        async query(){
           let {rows,total}= await queryList(this.queryParams);
           this.rows=rows;
           this.total=total;
        },
        changePageSize(pageSize){
            this.queryParams.limit=pageSize;
            this.$nextTick(()=>{ 
                this.query();
            });
        },
        remove(id){
            this.$Modal.confirm({
            title: "请确认",
            content: "确认要删除选中记录吗？",
            onOk: () => {
                remove(id).then(() => {
                        this.refresh("章节删除成功！");
                });
            }
         });
        },
        refresh(msg){
            console.log(msg);
            this.$Message.success(msg);
            this.query();
        }
    },
    mounted(){
        this.query();
        this.$store.dispatch("getCourseList");
    }
}
</script>